// ** React Imports
import { useContext, useEffect, useRef } from 'react'
import * as echarts from 'echarts'
import 'echarts-liquidfill'

export default ({ showText }) => {
  const deviceCharRef = useRef(null)
  const deviceCharData = {
    一号: {
      rate: '0.88',
      produced: '880',
      plan: '1000',
    },
    二号: {
      rate: '0.92',
      produced: '920',
      plan: '1000',
    },
    三号: {
      rate: '0.87',
      produced: '870',
      plan: '1000',
    },
    四号: {
      rate: '0.94',
      produced: '940',
      plan: '1000',
    },
    五号: {
      rate: '0.84',
      produced: '840',
      plan: '1000',
    },
    六号: {
      rate: '0.91',
      produced: '910',
      plan: '1000',
    },
  }
  console.log('showText', showText)
  useEffect(() => {
    initChart()
  }, [])

  const initChart = () => {
    const chart = echarts.init(deviceCharRef.current)
    chart.setOption({
      series: [
        {
          type: 'liquidFill',
          radius: '100%', // 水球图的半径
          center: ['50%', '50%'], // 水球图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
          // 水填充图的形状 circle 默认圆形  rect 圆角矩形  triangle 三角形
          // diamond 菱形  pin 水滴状 arrow 箭头状  还可以是svg的path
          shape: 'circle',
          phase: 0, // 波的相位弧度 不设置  默认自动
          direction: 'right', // 波浪移动的速度  两个参数  left 从右往左 right 从左往右
          outline: {
            show: true,
            borderDistance: 0, // 边框线与图表的距离 数字
            itemStyle: {
              opacity: 1, // 边框的透明度   默认为 1
              borderWidth: 1, // 边框的宽度
              shadowBlur: 1, // 边框的阴影范围 一旦设置了内外都有阴影
              shadowColor: '#fff', // 边框的阴影颜色,
              borderColor: '#41dcd8', // 边框颜色
            },
          },
          // 图形样式
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#7fdbff' },
              { offset: 1, color: '#41dcd8' },
            ]), // 水球显示的背景颜色
            opacity: 1, // 波浪的透明度
            shadowBlur: 1, // 波浪的阴影范围
          },
          backgroundStyle: {
            color: '#f0f8ff', // 水球未到的背景颜色
            opacity: 0.5,
          },
          // 图形的高亮样式
          emphasis: {
            itemStyle: {
              opacity: 0.8, // 鼠标经过波浪颜色的透明度
            },
          },
          // 图形上的文本标签
          label: {
            fontSize: 25,
            fontWeight: 400,
            color: '#fff',
          },
          data: [deviceCharData[showText].rate], // 系列中的数据内容数组
        },
      ],
    })
  }
  return (
    <div className="device-center-one">
      <div className="box-title font-size-24">
        {showText}生产线每日产出率统计
      </div>
      <div className="box-content center-one-content">
        <div className="right-one-content-item">
          <div className="value">{deviceCharData[showText].produced}</div>
          <div className="warning-bg"></div>
          <div className="subKey">今日已产出量</div>
        </div>
        <div className="right-one-content-item flex2">
          <div
            className="char"
            ref={deviceCharRef}
            style={{ height: '150px', width: '100%' }}
          ></div>
          <div style={{ marginTop: '12px', color: '#95f3f599' }}>产出率</div>
        </div>
        <div className="right-one-content-item">
          <div className="value">{deviceCharData[showText].plan}</div>
          <div className="warning-bg"></div>
          <div className="subKey">今日计划产出量</div>
        </div>
      </div>
    </div>
  )
}
